<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #one{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            float: left;
        }
        #two{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        form{
            float: left;
        }

        .one1{
            transform: rotate(10deg);
            -ms-transform: rotate(10deg);		/* IE 9 */
            -webkit-transform: rotate(10deg);	/* Safari and Chrome */
            -o-transform: rotate(10deg);		/* Opera */
            -moz-transform: rotate(10deg);		/* Firefox */
        }
        .one2{
            transform: rotate(20deg);
            -ms-transform: rotate(20deg);		/* IE 9 */
            -webkit-transform: rotate(20deg);	/* Safari and Chrome */
            -o-transform: rotate(20deg);		/* Opera */
            -moz-transform: rotate(20deg);		/* Firefox */
        }
        .one3{
            transform: rotate(30deg);
            -ms-transform: rotate(30deg);		/* IE 9 */
            -webkit-transform: rotate(30deg);	/* Safari and Chrome */
            -o-transform: rotate(30deg);		/* Opera */
            -moz-transform: rotate(30deg);		/* Firefox */
        }
        .one4{
            transform: rotate(40deg);
            -ms-transform: rotate(40deg);		/* IE 9 */
            -webkit-transform: rotate(40deg);	/* Safari and Chrome */
            -o-transform: rotate(40deg);		/* Opera */
            -moz-transform: rotate(40deg);		/* Firefox */
        }
        .one5{
            transform: rotate(45deg);
            -ms-transform: rotate(45deg);		/* IE 9 */
            -webkit-transform: rotate(45deg);	/* Safari and Chrome */
            -o-transform: rotate(45deg);		/* Opera */
            -moz-transform: rotate(45deg);		/* Firefox */
        }
        .one6{
            transform: rotate(50deg);
            -ms-transform: rotate(50deg);		/* IE 9 */
            -webkit-transform: rotate(50deg);	/* Safari and Chrome */
            -o-transform: rotate(50deg);		/* Opera */
            -moz-transform: rotate(50deg);		/* Firefox */
        }
        .one7{
            transform: rotate(60deg);
            -ms-transform: rotate(60deg);		/* IE 9 */
            -webkit-transform: rotate(60deg);	/* Safari and Chrome */
            -o-transform: rotate(60deg);		/* Opera */
            -moz-transform: rotate(60deg);		/* Firefox */
        }
        .one8{
            transform: rotate(70deg);
            -ms-transform: rotate(70deg);		/* IE 9 */
            -webkit-transform: rotate(70deg);	/* Safari and Chrome */
            -o-transform: rotate(70deg);		/* Opera */
            -moz-transform: rotate(70deg);		/* Firefox */
        }

        .one9{
            transform: rotate(80deg);
            -ms-transform: rotate(80deg);		/* IE 9 */
            -webkit-transform: rotate(80deg);	/* Safari and Chrome */
            -o-transform: rotate(80deg);		/* Opera */
            -moz-transform: rotate(80deg);		/* Firefox */
        }
        .one10{
            transform: rotate(90deg);
            -ms-transform: rotate(90deg);		/* IE 9 */
            -webkit-transform: rotate(90deg);	/* Safari and Chrome */
            -o-transform: rotate(90deg);		/* Opera */
            -moz-transform: rotate(90deg);		/* Firefox */
        }
        .one11{
            transform: rotate(100deg);
            -ms-transform: rotate(100deg);		/* IE 9 */
            -webkit-transform: rotate(100deg);	/* Safari and Chrome */
            -o-transform: rotate(100deg);		/* Opera */
            -moz-transform: rotate(100deg);		/* Firefox */
        }
        .one12{
            transform: rotate(110deg);
            -ms-transform: rotate(110deg);		/* IE 9 */
            -webkit-transform: rotate(110deg);	/* Safari and Chrome */
            -o-transform: rotate(110deg);		/* Opera */
            -moz-transform: rotate(110deg);		/* Firefox */
        }
        .one13{
            transform: rotate(120deg);
            -ms-transform: rotate(120deg);		/* IE 9 */
            -webkit-transform: rotate(120deg);	/* Safari and Chrome */
            -o-transform: rotate(120deg);		/* Opera */
            -moz-transform: rotate(120deg);		/* Firefox */
        }
    </style>
</head>
<body>
<form action="#">
    <input type="radio" name="nn" value="translate" onclick="one1()"/>rotate(10dag)</br>
    <input type="radio" name="nn" value="translate" onclick="one2()"/>rotate(20dag)</br>
    <input type="radio" name="nn" value="translate" onclick="one3()"/>rotate(30dag)</br>
    <input type="radio" name="nn" value="translate" onclick="one4()"/>rotate(40dag)</br>
    <input type="radio" name="nn" value="translate" onclick="one5()"/>rotate(45dag)</br>
    <input type="radio" name="nn" value="translate" onclick="one6()"/>rotate(50dag)</br>
    <input type="radio" name="nn" value="translate" onclick="one7()"/>rotate(60dag)</br>
    <input type="radio" name="nn" value="translate" onclick="one8()"/>rotate(70dag)</br>
    <input type="radio" name="nn" value="translate" onclick="one9()"/>rotate(80dag)</br>
    <input type="radio" name="nn" value="translate" onclick="one10()"/>rotate(90dag)</br>
    <input type="radio" name="nn" value="translate" onclick="one11()"/>rotate(100dag)</br>
    <input type="radio" name="nn" value="translate" onclick="one12()"/>rotate(110dag)</br>
    <input type="radio" name="nn" value="translate" onclick="one13()"/>rotate(1200dag)
</form>
<div id="one">
    <div id="two">MY DIV</div>
</div>

</body>
<script type="text/javascript">
    var rad = document.getElementById("two");
    function one1(){
        rad.className="one1";
    }
    function one2(){
        rad.className="one2";
    }
    function one3(){
        rad.className="one3";
    }
    function one4(){
        rad.className="one4";
    }
    function one5(){
        rad.className="one5";
    }
    function one6(){
        rad.className="one6";
    }
    function one7(){
        rad.className="one7";
    }
    function one8(){
        rad.className="one8";
    }
    function one9(){
        rad.className="one9";
    }
    function one10(){
        rad.className="one10";
    }
    function one11(){
        rad.className="one11";
    }
    function one12(){
        rad.className="one12";
    }
    function one13(){
        rad.className="one13";
    }
</script>
</html>